<template>
  <div class="index">
    <div class="form">
      <el-form label-position="left" label-width="80px">
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="#"
            :http-request="httpRequest"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名:">
          <el-input :disabled="true" v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-input v-model="form.userEmail"></el-input>
        </el-form-item>
        <el-form-item label="介绍:">
          <el-input v-model="form.userIntroduce" type="textarea" :rows="5"></el-input>
        </el-form-item>
        <div v-loading="loading">
          <el-button type="primary" @click="submit">确认更新</el-button>
          <el-button @click="loginout">退出登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      form: {
        userName: this.$session.get("userName"),
        userEmail: '',
        userIntroduce: ''
      },
      imageUrl: '',
      loading: false
    }
  },
  mounted() {
    this.getUserData ()
  },
  methods: {
    getUserData () {
      this.axios.get('api/getUser', {
        params: {
          userName: this.form.userName
        }
      }).then((res) => {
        this.form.userEmail = res.data[0].userEmail
        this.form.userIntroduce = res.data[0].userIntroduce
        this.imageUrl = res.data[0].userPhoto
      })
    },
    loginout () {
      this.$session.remove("userName")
      this.$store.state.userName = ''
      this.$store.state.isLogin = false
      this.$router.push({ path: '/' })
      this.$router.go(0)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    httpRequest (data) {
      let rd = new FileReader() // 创建文件读取对象
      let file = data.file
      rd.readAsDataURL(file) // 文件读取装换为base64类型
      rd.onload = (e) => {
        this.imageUrl = e.target.result
      }
    },
    submit () {
      this.axios.post('api/updataUserData', {
        userPhoto: this.imageUrl,
        userName: this.form.userName,
        userEmail: this.form.userEmail,
        userIntroduce: this.form.userIntroduce
      })
      this.loading = true
      setTimeout(() => {
        this.$router.push({ path: '/' })
        this.$router.go(0)
      }, 3000)
    }
  }
}
</script>

<style lang='stylus' scoped>
  .index
    color #fff
    font-weight bold
    background-color #fff
    // height 62.5rem
    padding 1.88rem 0.63rem
    .form
      max-width 25rem
      margin 0 auto
      .el-upload
      .avatar-uploader
        // margin 3rem auto 0 auto
        height 10rem
        width 10rem
        border 1px dashed #d9d9d9
        border-radius 0.38rem
        cursor pointer
        position relative
        overflow hidden
      .avatar-uploader
      .el-upload:hover 
        border-color #409EFF
      .avatar-uploader-icon 
        font-size 1.75rem
        color #8c939d
        width 10rem
        height 10rem
        line-height 10rem
        text-align center 
      .avatar 
        width 10rem
        height 10rem
        display block
</style>
